<template>
  <div>
    <input type="text" v-model="msg" @keyup="enter" />
  </div>
  <ul>
    <li v-for="(item, index) in arr" :key="index">
      {{ item.msg }}
      <button @click="finish(item)">完成</button>
      <button @click="del(item)">删除</button>
      <span v-if="item.isFinish">√</span>
    </li>
  </ul>
</template>
<script setup>
import { ref, reactive, toRefs } from "vue";
const data = reactive({
  msg: "",
  arr: [],
});
const { msg, arr } = toRefs(data);

const enter = (e) => {
  if (e.keyCode === 13) {
    arr.value.push({ msg: msg.value, isFinish: false });
  }
};
const finish = (item) => {
  arr.value.forEach((val) => {
    if (val === item) {
      val.isFinish = true;
    }
  });
  const temp = arr.value.splice(arr.value.indexOf(item), 1);
  arr.value.push(...temp);
  msg.value = "";
};
const del = (item) => {
  arr.value.splice(arr.value.indexOf(item), 1);
};
</script>
